<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" style="padding-bottom:120rpx;" class="grace-border-b">
			<!-- 轮播图 -->
			<swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)"
				indicator-active-color="#3688FF" style="height:775rpx" interval="5000">
				<swiper-item class="grace-swiper-item" v-for="(item, index) in swiperItems" :key="index">
					<image style="height: 775rpx;" :src="gRequest.apiUrlImages + item.image" mode="scaleToFill"
						class="grace-swiper-image"></image>
				</swiper-item>
			</swiper>
			<!-- 商品标题 分享按钮 -->
			<!-- <view class="grace-product-padding grace-space-between grace-flex-vcenter" v-if="!isH5">
				<text class="grace-product-title grace-bold">{{ goodsData.name }}</text>
				<view class="grace-product-share" @tap="openShare"><text class="grace-icons icon-share3"></text></view>
			</view> -->
			<view class="grace-common-line"></view>
			<!-- 价格 -->
			<view class="grace-product-padding">
				<view class="grace-nowrap grace-flex-vcenter">
					<text class="grace-product-price">￥{{ goodsData.price }}</text>
					<text class="grace-text grace-gray grace-line-through"
						style="margin-left:30rpx;">￥{{ goodsData.special_price }}</text>
				</view>
				<view class="grace-space-between grace-flex-vcenter">
					<text class="grace-text-small grace-gray">已售 {{ goodsData.salenum }} 件</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 底部信息切换导航 -->
			<view class="grace-product-padding">
				<graceNavBar :items="navItems" lineHeight="80rpx" :isCenter="true" :currentIndex="active" :size="200"
					activeLineBg="#FF7900" textAlign="center" activeColor="#FF7900" activeLineWidth="200rpx"
					activeLineHeight="2rpx" :margin="10" @change="navChange"></graceNavBar>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="grace-product-padding" :hidden="active == 1">
				<rich-text :nodes="goodsData.description"></rich-text>
			</view>
			<!-- 评论区 -->
			<view class="grace-comments grace-product-padding" :hidden="active == 0">
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index">
					<image :src="item.face" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.nickname }}</text>
							<text class="grace-comments-info-text">{{ item.createtime }}</text>
						</view>
						<graceStar :starnum="item.star" activecolor="#E76B61" fontSize="40rpx" :cantap="false">
						</graceStar>
						<text class="grace-comments-content">{{ item.msg }}</text>
						<view class="grace-comments-imgs" v-if="item.evaluate_image.length > 0">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.evaluate_image"
								:key="indexImg">
								<image :src="gRequest.apiUrlImages + img.image" mode="scaleToFill"
									class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cover_page" v-if="showPage">
				<image class="open_tip" src="../../static/open_tip.png" alt=""></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">

			<view style="width: 100%;">
				<button type="warn" class="grace-footer-button" style="background:#F37B1D;width: 100%;"
					@tap="showSharePage">下载APP</button>
			</view>
		</view>

	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
	import graceSelectTags from '../../graceUI/components/graceSelectTags.vue';
	import graceStar from '../../graceUI/components/graceStar.vue';
	export default {
		data() {
			return {
				// 轮播图
				swiperItems: [],
				// 切换导航
				navItems: ['商品详情', '相关评论'],
				active: 0,
				// 模拟评论数据 (实际项目来自api请求)
				commentContents: [],
				// 购买选择属性层展示
				attrIsShow: false,
				colorTips: [{
					name: '灰色',
					value: '灰色',
					checked: true
				}, {
					name: '银色',
					value: '银色',
					checked: false
				}],
				colorSelected: '灰色',
				typeTips: [{
					name: '套餐一',
					value: '套餐一',
					checked: true
				}, {
					name: '套餐二',
					value: '套餐二',
					checked: false
				}, {
					name: '套餐三',
					value: '套餐三',
					checked: false
				}],
				typeSelected: '套餐一',
				options: [],
				buyNum: 1,
				goodsData: {},
				optionQuery: {},
				buyType: 1,
				product_img: "",
				show: false,
				isH5: false,
				showPage: false
			};
		},
		onLoad: function(option) {
			this.optionQuery = option;
			this.gRequest.get(
				'/product/productinfo', {
					product_id: option.product_id
				},
				res => {
					this.swiperItems = res.data.photos;
					this.product_img = res.data.photos[0].image
					this.goodsData = res.data;
					for (let i = 0; i < res.data.evaluatelist.length; i++) {
						res.data.evaluatelist[i].star = Number(res.data.evaluatelist[i].star);
					}
					this.options = res.data.options
					for (let i = 0; i < this.options.length; i++) {
						for (let j = 0; j < this.options[i].option_value.length; j++) {
							this.options[i].option_value[j].name = this.options[i].option_value[j]
								.option_value_name
							this.options[i].option_value[j].value = this.options[i].option_value[j].option_id +
								"_" + this.options[i].option_value[j].option_value_id
							this.options[i].option_value[j].checked = j == 0 ? true : false
						}
					}
					this.commentContents = res.data.evaluatelist;
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				}
			);
		},
		mounted() {
			//#ifdef H5  
			document.querySelector('.uni-page-head-hd').style.display = 'none'
			//#endif  
		},
		methods: {
			showSharePage: function() {
				if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
					var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						//在微信中打开
						this.setData({
							showPage: true
						})
						return
					}
					window.location.href =
						"https://jianwu-1300616741.cos.ap-nanjing.myqcloud.com/default/%E7%AE%80%E5%8A%A1.apk"
				} else {
					//否则就是PC浏览器打开
					window.location.href =
						"https://jianwu-1300616741.cos.ap-nanjing.myqcloud.com/default/%E7%AE%80%E5%8A%A1.apk"
				}
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 评论图片展示
			showImgs: function(commentsIndex, imgIndex) {
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				});
			},

		},
		components: {
			gracePage,
			graceNavBar,
			graceSelectTags,
			graceNumberBox,
			graceStar
		}
	};
</script>
<style>
	.cover_page {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.75);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.cover_page .open_tip {
		width: 438rpx;
		height: 330rpx;
		position: absolute;
		right: 16rpx;
		top: 10rpx;
	}

	.grace-common-line {
		height: 16rpx;
	}

	.grace-product-padding {
		padding: 20rpx 25rpx;
	}

	.grace-product-title {
		line-height: 44rpx;
		font-size: 28rpx;
	}

	.grace-product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		color: #ff7900;
		line-height: 80rpx;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.grace-product-share:after {
		width: 0;
		height: 0;
	}

	.grace-product-price {
		color: #ff7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.grace-product-info-img {
		width: 100%;
	}

	.grace-product-attr-info {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f1f1f3;
		padding-bottom: 26rpx;
	}

	.grace-product-attr-info-image {
		width: 120rpx;
		height: auto;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.grace-product-attr-info-body {
		width: 700rpx;
	}

	.grace-product-attr-info-title {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
		display: block;
	}

	.grace-product-attr-info-stone {
		width: 100%;
		font-size: 20rpx;
		margin-top: 8rpx;
		color: #666666;
		display: block;
	}

	.icon-close {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #888888;
	}

	/* 调整宫格大小 */
	.grace-grids-items {
		padding: 6rpx 0;
		width: 120rpx;
	}

	.grace-grids-icon {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 40rpx;
		color: #6b7375;
	}

	.grace-grids-text {
		line-height: 28rpx;
		font-size: 20rpx;
		margin-top: 2px;
		color: #6b7375;
	}

	.grace-footer-active {
		color: #ff0036;
	}

	.grace-grids-items {
		width: 20%;
	}
</style>
